
<template>
	<div class="qualityRank">
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="时间" label-width="80px">
          <el-col :span="11">
             <el-date-picker
              v-model="searchForm.startTime"
              type="date"
              :clearable="false"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择开始日期">
            </el-date-picker>
          </el-col>
          <el-col :span="2" class="line"> - </el-col>
          <el-col :span="11">
             <el-date-picker
              v-model="searchForm.endTime"
              type="date"
              :clearable="false"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择结束日期">
            </el-date-picker>
          </el-col>
         
        </el-form-item>

        <el-form-item>
          <el-button class="greenBtn" size="mini" :disabled="factorLoading || analysisLoading" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-loading="factorLoading">
      <div class="searchFactor">
        <div class="searchItem" v-for="(item, index) of searchFactor" :key="index" 
          :class="{active: item.value === searchForm.curSearchFactor }"
          @click="changeCurSearchFactor(item.value)"
        >
          <p>{{item.label}}</p>
        </div>
      </div>
      <div class="factorRank card">
        <!-- 实时污染指数前3名统计 -->
        <div class="cardTit">
          <p class="title">{{factorRankTitle}}分指数排名统计</p>
        </div>
        <div class="cardCnt factorRankCnt">
          <div class="pieChartBox"><charts :option="factorRankChart"></charts></div>
        </div>
      </div>
    </div>

    <div class="rankAnalysis card" v-loading="analysisLoading">
      <div class="cardTit">
        <p class="title">{{Number(searchForm.type) ? '街道' : '水站'}}排名统计分析</p>
        <div class="searchAnalysis ">
          <el-radio-group v-model="searchForm.type" fill="#3574e1" size="small" @change="changeCurSearchAnalysis">
            <el-radio-button label="0">水站</el-radio-button>
            <el-radio-button label="1">街道</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="cardCnt rankAnalysisCnt">
        <div class="rankAnalysisChart"><charts :option="rankAnalysisChart['监测值排名']"></charts></div>
        <div class="rankAnalysisChart"><charts :option="rankAnalysisChart['水质达标天数排名']"></charts></div>
        <div class="rankAnalysisChart"><charts :option="rankAnalysisChart['环比变化量排名']"></charts></div>
        <div class="rankAnalysisChart"><charts :option="rankAnalysisChart['环比排名变化量排名']"></charts></div>

      </div>
    </div>
	</div>
</template>
<script>
import charts from '../components/charts.vue'
import { mapActions, mapGetters } from 'vuex'
import common from '@/plugins/common'
export default {
  name: 'qualityRank',
  data () {
    return {
      msg: 'hello qualityRank!',
      factorLoading: false,
      analysisLoading: false,
      searchForm: {
        startTime: '',
        endTime: '',
        curSearchFactor: 'pH',
        type: "0",
      },

      factorRankTitle: 'pH',
      searchFactor: [
        // {label: '污染指数', value: 'pollutionIndex'},
        {label: 'pH', value: 'pH'},
        {label: '氨氮', value: 'ammoniaNitrogen'},
        {label: '总氮', value: 'nitrogen'},
        {label: '总磷', value: 'phosphorus'},
        {label: '总铜', value: 'cuprum'},
        {label: '总镍', value: 'nickel'},
        {label: '总氰化物', value: 'prussiate'},
        {label: '总铬', value: 'chromium'},
      ],
      factorRankChart: {},

      rankAnalysisDefault: {
        /**
         * 需要动态配置的选项
         * 
         * color: xxx,  #25d07e; #ffad01; #0063ed; #44bce9;
         * 
         * title.text
         * xAxis.data
         * series[0].data
         * 
         */
        grid: {
          bottom: 100
        },
        title: {
          bottom: 0,
          left: 'center',
          subtextStyle: {
            color: '#939393',
          }
        },
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          },
          formatter: '{b}：{c}'
        },
        xAxis: {
          data: [],
          axisLine: {onZero: false},
          axisTick: {
            inside: true
          },
          axisLabel: {
            formatter: (value) => value.split("").join("\n")
          }
        },
        yAxis: {
          name: '数值',
          axisTick: {
            inside: true
          },
        },
        series: [
          {
            name: 'bar',
            type: 'bar',
            barWidth: 30,
            data: []
          },
        ]
      },
      rankAnalysisChart: {
        "监测值排名": {},
        "水质达标天数排名": {},
        "环比变化量排名": {},
        "环比排名变化量排名": {},
      }
		}
  },
  methods: {
    ...mapActions([
      'fetchFactorChart',
      'fetchAnalysisChart',
    ]),
    async onSubmit() {
      let searchForm = this.searchForm
      this.factorLoading = true
      this.analysisLoading = true
      await this.postAnalysisChart(searchForm)
      await this.postFactorChart(searchForm)
    },
    changeCurSearchFactor(val) {
      this.searchForm.curSearchFactor = val
      this.factorRankTitle = this.searchFactor.find(item => item.value === val).label
      this.postFactorChart(this.searchForm)      
    },
    changeCurSearchAnalysis(val) {
      this.searchForm.type = val
      this.postAnalysisChart(this.searchForm) 
    },

    async postFactorChart(param) {
      this.factorLoading = true
      await this.fetchFactorChart({
        startTime: param.startTime,
        endTime: param.endTime,
        search: param.curSearchFactor,
      })
      this.configChartFactorRank(this.factorRankData)
      this.factorLoading = false
    },
    async postAnalysisChart(param) {
      this.analysisLoading = true
      await this.fetchAnalysisChart({
        startTime: param.startTime,
        endTime: param.endTime,
        type: param.type,
      })
      this.configChartrankAnalysis(this.rankAnalysis)
      this.analysisLoading = false
    },

    configChartFactorRank(data) {
      /** 因子排名统计图表配置 */
      this.factorRankChart = {
        color: ['#8578ff'],
        grid: {
          left: 45,
          right: 45,
        },
        tooltip : {
          trigger: 'axis',
          formatter: "{b}<br />" + this.factorRankTitle + "{a}: {c}",
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis : [
          {
            type : 'category',
            data : data.map(v => v.name),
            axisTick: {
              inside: true
            },
          }
        ],
        yAxis : {
          name: "分污染指数值",
          type : 'value',
          axisTick: {
            inside: true
          },
        },
        series : [
          {
            name:'分污染指数',
            type:'bar',
            barWidth: 30,
            stack: '1',
            data: data.map(v => v.value !== -1 ? v.value.toFixed(2) : 0),
          },
          
        ]
      }

    },
    configChartrankAnalysis(data) {
      const color = {
        "监测值排名": "#25d07e",
        "水质达标天数排名": "#ffad01",
        "环比变化量排名": "#0063ed",
        "环比排名变化量排名": "#44bce9",
      } 
      for(let v in this.rankAnalysisChart) {
        // this.rankAnalysisChart[v] = JSON.parse(JSON.stringify(this.rankAnalysisDefault))
        this.rankAnalysisChart[v] = common.deepClone(this.rankAnalysisDefault)
      }
      for(let key in data) {
        this.rankAnalysisChart[key].color = color[key]
        this.rankAnalysisChart[key].title.subtext = key
        this.rankAnalysisChart[key].xAxis.data = data[key].map(v => v.name)
        this.rankAnalysisChart[key].series[0].data = data[key].map(v => v.value !== null ? v.value.toFixed(2) : 0)
      }
      
      this.rankAnalysisChart["监测值排名"].tooltip.formatter = '{b} 污染指数：{c}'

      this.rankAnalysisChart["水质达标天数排名"].yAxis.name = "天"
      this.rankAnalysisChart["水质达标天数排名"].yAxis.minInterval  = 1
      this.rankAnalysisChart["水质达标天数排名"].tooltip.formatter = (params) => params[0].name + '：' + Number(params[0].value).toFixed(0) + '天'
      //数据模拟 环比排名变化量排名
      // this.rankAnalysisChart["环比排名变化量排名"].xAxis.data = data["环比变化量排名"].map(v => v.name)
      // this.rankAnalysisChart["环比排名变化量排名"].series[0].data = [0.1, 0.66, 0.55, 0.41, 0.96, 1.02, 1.45, 2.01, 1.96].sort(() => Math.random() - 0.5)
      
    },
  },
  mounted() {},
  computed: {
    ...mapGetters({
      factorRankData: 'getQualityFactorRankChart',
      rankAnalysis: 'getRankAnalysisChart',
    }),
  },
  created() {
    this.searchForm.startTime = common.changeDateToString(new Date(new Date().getTime() - 2592000000))
    this.searchForm.endTime = common.changeDateToString(new Date())

    this.onSubmit()
  },
  components: {
    charts
  }
}
</script>
<style scoped>
.searchBox {
  background: #fff;
  padding: 20px 20px 0 20px;
  margin-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}
/* card */
.card {
  margin-bottom: 15px;
  padding: 0 20px 20px 20px;
  background: #fff;
}
.card .cardTit {
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ececec;
  margin-bottom: 20px;
  padding-left: 15px;
}
.card .cardCnt {}
.cardTit p::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 20px;
  background: #2399ff;
  top: 50%;
  margin-top: -10px;
  left: 0;
}

.factorRank {}
.factorRankCnt {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 400px;
}

.pieChartBox {
  width: 100%;
  height: 400px;
}

.searchFactor {
  display: flex;
  flex-wrap: nowrap;
  background-color: #fff; 
  padding: 0 10px;
}
.searchFactor .searchItem {
  position: relative;
  padding: 10px;
  margin-right: 1px;
  text-align: center;
  color: #6a6a6a;
  cursor: pointer;
}
.searchFactor .searchItem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  margin: 0 auto;
  height: 2px;
  border-radius: 2px;

  background-color: transparent;
  transition: background-color .2s ease-in;

}
.searchFactor .searchItem:hover,
.searchFactor .searchItem.active {
  color: #3574e1;
}
.searchFactor .searchItem:hover::after,
.searchFactor .searchItem.active::after{
  background-color: #3574e1;
}
.searchFactor .searchItem:last-child {
  margin-right: 0;
}

.rankAnalysis {
  margin-bottom: 0;
}
.rankAnalysis .searchAnalysis{
  position: absolute;
  right: 0;
  top: 0;
}
.rankAnalysis .rankAnalysisCnt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.rankAnalysisCnt .rankAnalysisChart {
  width: 49%;
  margin-bottom: 2%;
  height: 380px;
}


</style>